<template>
  <div class="register-responser">
    <div class="drawer-wrap" :class="{ disabled: !editable }" v-loading="loading">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="0" :rules="editFormRules" ref="editForm">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="card row2">
                <div class="star"></div>
                <div>
                  <span class="icon linear-purpose">
                    <icon-svg name="iconResTeam"></icon-svg>
                  </span>
                </div>
                <div class="title">责任团队</div>
                <div class="content">
                  <el-form-item prop="respTeamId">
                    <el-cascader
                      v-model="editForm.respTeamId"
                      :options="depts"
                      :props="{
                        expandTrigger: 'hover',
                        value: 'deptId',
                        label: 'deptNm',
                        children: '_children',
                        checkStrictly: true
                      }"
                      clearable
                      filterable
                      :disabled="!editable"
                    ></el-cascader>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div>
                  <span class="icon linear-blue">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">责任人</div>
                <div class="content">
                  <el-form-item prop="responserId">
                    <el-select v-model="editForm.responserId" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in responsers"
                        :key="item.userId"
                        :label="$name(item)"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div class="star"></div>
                <div>
                  <span class="icon linear-yellow">
                    <icon-svg name="iconResTeam"></icon-svg>
                  </span>
                </div>
                <div class="title">开发团队</div>
                <div class="content">
                  <el-form-item prop="devTeamId">
                    <el-select v-model="editForm.devTeamId" :disabled="!editable">
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in devDepts"
                        :key="item.deptId"
                        :label="item.deptNm"
                        :value="item.deptId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div class="star"></div>
                <div>
                  <span class="icon linear-cyan">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">开发负责人</div>
                <div class="content">
                  <el-form-item prop="developerId">
                    <el-select v-model="editForm.developerId" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in develops"
                        :key="item.userId"
                        :label="$name(item)"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <template v-if="astTagRequireStatusList.length">
            <div class="content-divider second">
              <div class="clearfix">
                <div class="number">01</div>
                <div class="divider-title">注册状态<br />Register status</div>
                <div class="bg"></div>
              </div>
            </div>
            <ul class="tag-status-list">
              <li v-for="(item, index) in astTagRequireStatusList" :key="index">
                <el-row :gutter="20">
                  <el-col :span="5">{{ $name(item, 'handlerNnm', 'handlerNm') }}</el-col>
                  <el-col :span="5">{{ item.nodeNm }}</el-col>
                  <el-col :span="7">{{ item.procTm }}</el-col>
                  <el-col :span="7">{{ item.handlerCmnt }}</el-col>
                </el-row>
              </li>
            </ul>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns" v-if="editable">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" size="medium" @click="handlePrev">上一步</el-button>
      <el-button type="primary" size="medium" @click="handleSave(false)">保存为草稿</el-button>
      <el-button type="primary" size="medium" @click="handleSubmit">提交</el-button>
    </div>
    <user-selection ref="userSelection" :procId="2" :nodeId="40" @callback="confirmUser"></user-selection>
  </div>
</template>

<script>
import userSelection from '../../../../components/tag-user-selection'
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    }
  },
  components: {
    userSelection
  },
  data() {
    return {
      editable: false,
      loading: false,
      depts: [],
      devDepts: [],
      responsers: [],
      develops: [],
      editForm: {
        respTeamId: [],
        responserId: '',
        devTeamId: [],
        developerId: '',
        handlerId: ''
      },
      astTagRequireStatusList: [],
      editFormRules: {
        respTeamId: [{ required: true, message: '分配责任团队不能为空', trigger: 'change' }],
        devTeamId: [{ required: true, message: '开发团队不能为空', trigger: 'change' }],
        developerId: [{ required: true, message: '开发负责人不能为空', trigger: 'change' }]
      }
    }
  },
  watch: {
    'editForm.respTeamId'() {
      this.editForm.responserId = ''
      this.responsers = []
      this.getResponsers()
    },
    'editForm.devTeamId'(val) {
      this.editForm.developerId = ''
      this.develops = []
      if (val) {
        this.devDepts.forEach(item => {
          if (item.deptId === val) this.develops = item.userList || []
        })
      }
    }
  },
  methods: {
    getSelections() {
      this.getDelpt()
      this.getDevDept()
    },
    getDetail() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagRegister/readNode'),
        method: 'get',
        params: this.$ajax.setParams({
          tagIds: this.tagId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editable = data.data.editable
          if (data.data.astTagPrincipalRelaDTO) {
            this.editForm.respTeamId = data.data.astTagPrincipalRelaDTO.respTeamId || ''
            this.editForm.devTeamId = data.data.astTagPrincipalRelaDTO.devTeamId || ''
            this.$nextTick(() => {
              this.editForm.developerId =
                data.data.astTagPrincipalRelaDTO.developerId === '0' ? '' : data.data.astTagPrincipalRelaDTO.developerId
              this.editForm.responserId =
                data.data.astTagPrincipalRelaDTO.responserId === '0' ? '' : data.data.astTagPrincipalRelaDTO.responserId
            })
          }
          this.astTagRequireStatusList = data.data.astTagRequireStatusList || []
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDelpt() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authDeptMgr/all'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          let treeList = []
          let list = this.$utils.arrayToTree(data.data, {
            id: 'deptId',
            pid: 'parentDeptId',
            mainSort: 'treeLevel'
          })
          list.forEach((item, index) => {
            const listIndex = treeList.findIndex(listItem => listItem.compId === item.compId)
            if (listIndex >= 0) {
              if (treeList[listIndex]._children) treeList[listIndex]._children.push(item)
              else treeList[listIndex]._children = [item]
            } else {
              treeList.push({
                compId: item.compId,
                deptId: -index,
                deptNm: item.compNm,
                disabled: true,
                _children: [item]
              })
            }
          })
          this.depts = treeList
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getResponsers() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUser/getUserByDeptId'),
        method: 'get',
        params: this.$ajax.setParams({
          deptId: isNaN(this.editForm.respTeamId)
            ? this.editForm.respTeamId[this.editForm.respTeamId.length - 1]
            : this.editForm.respTeamId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.responsers = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDevDept() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysProcNodeRole/deptuser/1/40'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.devDepts = data.data
          if (this.editForm.devTeamId)
            this.devDepts.forEach(item => {
              if (item.deptId === this.editForm.devTeamId) this.develops = item.userList || []
            })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    handleCancel() {
      this.clearForm()
      this.$emit('close')
    },
    clearForm() {
      this.editable = false
      this.loading = false
      this.depts = []
      this.editForm = {
        respTeamId: [],
        responserId: '',
        devTeamId: '',
        developerId: '',
        handlerId: ''
      }
      this.astTagRequireStatusList = []
      this.$refs.editForm.clearValidate()
    },
    handleSave(isSubmit) {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.loading = true
          let url = isSubmit ? 'ast/astTagRegister/thirdSubmit' : 'ast/astTagRegister/thirdSave'
          this.$ajax({
            url: this.$ajax.setUrl(url),
            method: 'post',
            data: this.$ajax.setData({
              devTeamId: this.editForm.devTeamId,
              developerId: this.editForm.developerId,
              respTeamId: isNaN(this.editForm.respTeamId)
                ? this.editForm.respTeamId[this.editForm.respTeamId.length - 1]
                : this.editForm.respTeamId,
              responserId: this.editForm.responserId,
              tagId: this.tagId,
              handlerId: this.editForm.handlerId
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              if (isSubmit) {
                this.$emit('callback')
              }
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    handleSubmit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$refs.userSelection.showDialog()
        }
      })
    },
    confirmUser(handlerId) {
      if (handlerId) {
        this.editForm.handlerId = handlerId
        this.handleSave(true)
      } else {
        this.loading = false
      }
    },
    handlePrev() {
      if (this.loading) return
      this.$emit('prev')
    }
  }
}
</script>

<style lang="scss">
.register-responser {
  .el-select,
  .el-cascader {
    .el-input__inner {
      color: $theme-color;
      border-style: dashed;
      border-radius: 20px;
    }
    .el-input .el-select__caret {
      color: $theme-color;
    }
  }
  .icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px 0;
    line-height: 70px;
    color: #fff;
    border-radius: 50%;
    svg {
      width: 40px;
      height: 40px;
      margin-top: 10px;
    }
  }
  .card {
    margin-bottom: 20px;
    text-align: center;
    .title {
      margin: 0 0 20px 0;
    }
    .content {
      height: 60px;
      color: $theme-color;
      position: relative;
      &:after {
        width: 100%;
        height: 3px;
        content: '';
        background-color: #666bc6;
        position: absolute;
        left: 0;
        bottom: -13px;
      }
    }
  }
}
</style>
